<template>
  <view>
    <!-- 微信小程序使用 -->
    <button @click="wechat()">[小程序] 上传文件到OSS</button>
    <!-- H5网页使用 -->
    <button @click="web()">[H5网页] 上传文件到OSS</button>
  </view>
</template>

<script>
// 修改为 ES6 import 语法
import uploadAliyun from '@/components/aliyunOss/upload/uploadAliyun.js';

export default {
  data() {
    return {}
  },

  methods: {
    /**
     * 微信小程序平台
     * @description 无论是使用uni.chooseMedia还是各种图片、文件,其道理都是一样的，都是获取临时路径，再通过本[uploadAliyun]进行上传即可。
     * @return void
     */
    wechat() {
      // api文档:https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
      uni.chooseMedia({
        count: 1,//最多可以选择几张图片
        mediaType: ['image'],//图片类型
        sourceType: ['album', 'camera'],//可从相机、相册拿取
        success: (res) => {
          // 重点！这个就是临时路径！
          // 重点！这个就是临时路径！
          // console.log(res)
          const file = res.tempFiles[0].tempFilePath

          // 上传前,要确保临时路径是正确的(开始上传到OSS)
          // 对于此api参数，详见uploadAliyun.js文件
          uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "test",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: "54546456.png",
            success: (res) => {
              console.log(res)
              uni.showModal({
                title: '上传成功',
                content: JSON.stringify(res)
              })
            },
            fail: (err) => {
              console.log("上传失败", err)
            }
          })
        }
      })
    },

    /**
     * H5网页平台
     * @description 无论是使用uni.chooseImage还是各种图片、文件,其道理都是一样的，都是获取临时路径，再通过本[uploadAliyun]进行上传即可。
     * @return void
     */
    web() {
      // api文档:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
      uni.chooseImage({
        count: 1,//最多可以选择几张图片
        sourceType: ['album', 'camera'],//可从相机、相册拿取
        success: (res) => {
          // 重点！这个就是临时路径！
          // 重点！这个就是临时路径！
          // console.log(res)
          const blob = res.tempFilePaths[0]
          // console.log(blob)
          // H5网页不同于微信小程序,该临时路径是blob

          // 上传前,要确保临时路径是正确的(开始上传到OSS)
          // 对于此api参数，详见uploadAliyun.js文件
          uploadAliyun({
            // H5上传的文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: blob,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "wechat/test",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取H5文件后缀名,自己拼接
            name: `test.${this.getWebFormat(res.tempFiles[0])}`,
            success: (res) => {
              console.log(res)
              uni.showModal({
                title: '上传成功',
                content: JSON.stringify(res)
              })
            },
            fail: (err) => {
              console.log("上传失败", err)
            }
          })
        }
      })
    },

    /**
     * 获取 [微信] 临时文件扩展名
     * @description 由于临时路径都是一堆字母,所以拿到后缀后自己拼
     * @param {String} name - 文件完整名称(带后缀)
     * @return String
     */
    getWechatFormat(name) {
      return name.substring(name.lastIndexOf(".") + 1)
    },

    /**
     * 获取 [H5网页] 临时文件扩展名
     * @description 由于临时路径是blob(不存在后缀名),所以拿File对象读取
     * @param {Object} file - 文件对象
     * @return String
     */
    getWebFormat(file) {
      return file.name.substring(file.name.lastIndexOf(".") + 1)
    },
  }
}
</script>

<style scoped>

</style>
